<!--  -->
<template>
  <div class="customize-url">
    <el-dialog :title="'推广' + title" :visible.sync="dialogVisible" width="800px" @closed="hidden" :close-on-click-modal="false">
      <div v-loading="loading">
        <div class="note-u">复制链接或转发/投放进行产品推广</div>
        <el-form :model="itemurlStatus">
          <el-form-item label="启用自定义URL">
            <el-switch v-model="itemurlStatus.isOpen" active-color="#13ce66"
              @change="changeShow(itemurlStatus.isOpen)">
            </el-switch>
            <el-tooltip class="item" effect="dark" content="启用自定义URL，可以独立设置该详情页面对外展示的URL，便于推广您的产品" placement="right">
              <i class="el-icon-question color-gray"></i>
            </el-tooltip>
          </el-form-item>
        </el-form>
        <div v-if="itemurlStatus.isOpen">
          <div class="title-h">您的推广地址</div>
          <div class="border-u" v-loading="xloading">
            <el-form>
              <el-form-item label="请选择推广域名：">
                <el-select size="mini" v-model="curDomain.domainId" style="width: 355px;" placeholder="请选择域名">
                  <el-option v-for="item in customizeUrl.listHDomain" :key="item.id" :label="item.domainName" :value="item.id"></el-option>
                </el-select>
                <span class="span-u">还没有域名？</span><span class="domainset-u" @click="toDomain">去绑定</span>
              </el-form-item>
            </el-form>
            <el-form :model="pathInput" ref="itemCustomizeurl">
              <el-form-item label="请选择自定义链接模式：">
                <el-radio-group v-model="pathInput.pathstyle" class="radio-block-u">
                  <el-radio size="mini" :label="1">
                    <template>
                      <span>{{curDomain.domainName}}{{customizeUrl.lanno?customizeUrl.lanno:''}}</span><span>/</span>&nbsp;
                      <el-input size="small" style="width:200px;" v-model="pathInput.path1"></el-input>
                      <span>{{customizeUrl.suffix}}</span>
                    </template>
                  </el-radio>
                  <el-radio size="mini" :label="2">
                    <template>
                      <span>{{curDomain.domainName}}{{customizeUrl.lanno?customizeUrl.lanno:''}}</span><span>/</span>&nbsp;
                      <el-select v-model="pathInput.path2.onepath" allow-create filterable default-first-option size="small" placeholder="请选择或填写" style="width:200px;">
                        <el-option label="无" :value="-1" disabled v-if="customizeUrl.pathOneGroup && customizeUrl.pathOneGroup.length < 1"></el-option>
                        <el-option
                          v-for="(item,index) in customizeUrl.pathOneGroup"
                          :key="index"
                          :label="item"
                          :value="item">
                        </el-option>
                      </el-select>
                      &nbsp;<span>/</span>&nbsp;
                      <el-input size="small" style="width:200px;" v-model="pathInput.path2.twopath"></el-input>
                      <span>{{customizeUrl.suffix}}</span>
                    </template>
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <div style="text-align:right;">
                <el-button @click="save" type="primary" size="small">保存</el-button>
              </div>
            </el-form>
          </div>
        </div>
        <div>
          <div class="title-h">您的推广地址</div>
          <div class="border-u">
            <el-form :model="customizeUrl">
              <el-form-item :label="'产品链接：'">
                <el-input size="small" style="width:400px;" v-model="checkUrl" disabled></el-input>
                <el-button @click="checkitem()" type="primary" size="small" style="float:right; margin-top:4px;">访问</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
  },
  data () {
    return {
      title: '产品',
      loading: false,
      xloading: false,
      dialogVisible: false,
      formLabelWidth: '120px',
      customizeUrl: {},
      systemId: null,
      itemId: null,
      itemurlStatus: {
        isOpen: false
      },
      lanno: '',
      curDomain: {
        domainId: null,
        domainName: ''
      },
      pathInput: {
        pathstyle: 1,
        path1: '',
        path2: {
          onepath: '',
          twopath: ''
        }
      },
      checkUrl: ''
    }
  },
  watch: {
    'curDomain.domainId': {
      handler (newValue) {
        if (this.customizeUrl.listHDomain.length > 0) {
          this.customizeUrl.listHDomain.forEach(element => {
            if (element.id === newValue) {
              this.curDomain.domainName = element.domainName
            }
          })
        }
      },
      deep: true
    },
    'itemurlStatus.isOpen': {
      handler (newValue) {
        if (!newValue) {
          if (this.customizeUrl.listHDomain && this.customizeUrl.listHDomain.length > 0) {
            let pathx = ''
            if (this.lanno) {
              pathx += this.lanno
            }
            this.checkUrl = this.customizeUrl.listHDomain[0].domainName + pathx + this.customizeUrl.defaultAccessUrlPath
            this.curDomain.domainId = this.customizeUrl.listHDomain[0].id
          } else {
            this.checkUrl = ''
          }
        } else {
          if (this.curDomain.domainName) {
            if (this.customizeUrl.path && this.customizeUrl.path.length > 0) {
              let pathx = ''
              if (this.lanno) {
                pathx += this.lanno
              }
              this.customizeUrl.path.forEach(el => {
                pathx += '/' + el
              })
              this.checkUrl = this.curDomain.domainName + pathx + this.customizeUrl.suffix
            }
          } else {
            this.checkUrl = ''
          }
        }
      },
      deep: true
    }
  },
  computed: {

  },
  methods: {
    resetData (res) {
      this.customizeUrl = res
      this.itemurlStatus.isOpen = this.customizeUrl.status > 0
      if (this.customizeUrl.path && this.customizeUrl.path.length > 0) {
        if (this.customizeUrl.path.length === 1) {
          this.pathInput.pathstyle = 1
          this.pathInput.path1 = this.customizeUrl.path[0]
          this.pathInput.path2.onepath = ''
          this.pathInput.path2.twopath = ''
        } else if (this.customizeUrl.path.length === 2) {
          this.pathInput.pathstyle = 2
          this.pathInput.path1 = ''
          this.pathInput.path2.onepath = this.customizeUrl.path[0]
          this.pathInput.path2.twopath = this.customizeUrl.path[1]
        }
      }
      if (!this.itemurlStatus.isOpen && this.customizeUrl.listHDomain && this.customizeUrl.listHDomain.length > 0) {
        let pathx = ''
        if (this.lanno) {
          pathx += this.lanno
        }
        this.checkUrl = this.customizeUrl.listHDomain[0].domainName + pathx + this.customizeUrl.defaultAccessUrlPath
      } else if (this.itemurlStatus.isOpen && this.customizeUrl.path && this.customizeUrl.path.length > 0) {
        let pathx = ''
        if (this.lanno) {
          pathx += this.lanno
        }
        this.customizeUrl.path.forEach(el => {
          pathx += '/' + el
        })
        this.checkUrl = this.curDomain.domainName + pathx + this.customizeUrl.suffix
      }
    },
    show (sysId, id) {
      this.systemId = sysId
      this.itemId = id
      this.dialogVisible = true
      this.loading = true
      let param = {
        systemId: sysId,
        itemId: id
      }
      this.xloading = false
      this.$post('/system/product/item-custom-link', param).then(response => {
        if (response) {
          this.customizeUrl = response
          this.title = this.customizeUrl.title
          this.lanno = this.customizeUrl.lanno
          if (this.customizeUrl.listHDomain && this.customizeUrl.listHDomain.length > 0) {
            this.curDomain.domainId = this.customizeUrl.listHDomain[0].id
          } else {
            this.curDomain.domainId = null
          }
          this.resetData(response)
        }
        this.loading = false
      })
    },
    changeShow (status) {
      let saveSystemItemCustomLink = {
        itemId: this.itemId,
        path: this.customizeUrl.path,
        status: status ? 1 : 0,
        systemId: this.systemId
      }
      this.xloading = true
      if (!status || this.customizeUrl.path.length > 0) {
        this.$jpost('/system/product/save-item-custom-link', saveSystemItemCustomLink).then(response => {
          if (response) {
            this.resetData(response)
          }
          this.xloading = false
        })
      } else {
        this.xloading = false
      }
    },
    hidden () {
      this.dialogVisible = false
      this.loading = false
      this.xloading = false
      this.customizeUrl = {}
      this.systemId = null
      this.itemId = null
      this.pathInput = {
        pathstyle: 1,
        path1: '',
        path2: {
          onepath: '',
          twopath: ''
        }
      }
      this.checkUrl = ''
    },
    save () {
      if (this.xloading) {
        return
      }
      let path = []
      let reg = RegExp(/^([\u4e00-\u9fa5]|[a-zA-Z])+([\u4e00-\u9fa5]|[a-zA-Z0-9]|-)*$/)
      if (parseInt(this.pathInput.pathstyle) === 1) {
        if (this.pathInput.path1 === '') {
          this.$message.error('自定义链接不能为空')
          return
        } else {
          let lastChart = this.pathInput.path1.split('')[this.pathInput.path1.length - 1]
          if (lastChart === '-') {
            this.$message.error(this.pathInput.path1 + '错误，自定义链接不能以中横线结尾')
            return
          }
          if (!reg.test(this.pathInput.path1)) {
            this.$message.error(this.pathInput.path1 + '错误，自定义链接只能由中文、英文、数字、中横线组成，且每个链接路径不能以数字开头，不能以中横线开头结尾')
            return
          } else {
            path.push(this.pathInput.path1)
          }
        }
      } else if (parseInt(this.pathInput.pathstyle) === 2) {
        if (this.pathInput.path2.onepath === '' || this.pathInput.path2.twopath === '') {
          this.$message.error('自定义链接不能为空')
          return
        } else {
          let lastChart1 = this.pathInput.path2.onepath.split('')[this.pathInput.path2.onepath.length - 1]
          let lastChart2 = this.pathInput.path2.twopath.split('')[this.pathInput.path2.twopath.length - 1]
          if (lastChart1 === '-') {
            this.$message.error(this.pathInput.path2.onepath + '错误，自定义链接不能以中横线结尾')
            return
          }
          if (lastChart2 === '-') {
            this.$message.error(this.pathInput.path2.twopath + '错误，自定义链接不能以中横线结尾')
            return
          }
          if (!reg.test(this.pathInput.path2.onepath)) {
            this.$message.error(this.pathInput.path2.onepath + '错误，自定义链接只能由中文、英文、数字、中横线组成，且每个链接路径不能以数字、中横线开头')
            return
          } else if (!reg.test(this.pathInput.path2.twopath)) {
            this.$message.error(this.pathInput.path2.twopath + '错误，自定义链接只能由中文、英文、数字、中横线组成，且每个链接路径不能以数字、中横线开头')
            return
          } else {
            path.push(this.pathInput.path2.onepath)
            path.push(this.pathInput.path2.twopath)
          }
        }
      }
      let saveSystemItemCustomLink = {
        itemId: this.itemId,
        path: path,
        status: this.itemurlStatus.isOpen ? 1 : 0,
        systemId: this.systemId
      }
      this.xloading = true
      this.$jpost('/system/product/save-item-custom-link', saveSystemItemCustomLink).then(response => {
        if (response) {
          this.resetData(response)
        }
        this.xloading = false
      })
    },
    checkitem () {
      let param = {
        domainId: this.curDomain.domainId,
        systemId: this.systemId,
        itemId: this.itemId
      }
      this.$post('/url/domain-system-item-link', param).then(response => {
        if (response && response.length > 0) {
          window.open(response)
        }
      })
    },
    toDomain () {
      this.$store.dispatch('menuChange', {index: '7-1', isAlwaysPush: true})
    }
  }
}

</script>
<style scoped lang="scss">
.customize-url /deep/ {
  .el-dialog__body {
    padding-bottom: 10px;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  .el-input.is-disabled .el-input__icon{
    display: none;
  }
}
.note-u {
  color:#E6A23C;
  text-align: center;
  background: #FDF4EA;
  padding: 8px 10px;
  margin-top: -10px;
  margin-bottom: 15px;
}
.color-gray{
  color: #999;
  vertical-align: middle;
  }
.title-h{
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-bottom: 10px;
}
.border-u{
  border: 1px solid #e9e9e9;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 14px 20px;
  margin-bottom: 15px;
}
.span-u{
  padding-left: 10px;
}
.domainset-u{
  cursor: pointer;
  color: #258FFB;
}
.radio-block-u /deep/ .el-radio{
  margin-bottom: 15px;
  .el-radio__label{
    white-space: normal;
    span{
      display: inline-block;
      line-height: 2;
    }
  }
}
</style>
